import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import { Router, Link,browserHistory } from 'react-router';
import api from '../api';
import { Menu, Icon, Switch,Layout } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const { Header, Sider, Content,Footer } = Layout;

import 'navgation.scss';

let AUTH = {
  1:['authority','user','loan','operation','protocol','generalize','logout'],
  2:['loan','operation','logout'],
  3:['generalize','logout'],
  4:['generalize','logout'],
  5:['operation','logout']
}

export default class Navigation extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state = {
          session:{},
          current:location.pathname
        };
    }
    componentWillMount() {
       this.checkLogin();
    }
   
    componentWillReceiveProps(nextProps){
      this.checkLogin();
    }

    
    logout(){
      location.href="/logout";
    }

    isActive(path){
      if(!location.pathname.includes(path)){
          return "";
      }
      return " ant-menu-item-selected";
      
    }

    handleClick(e){
      if(e.key=='/logout'){
        location.href="/logout";
        return
      }
      this.setState({
        current:e.key
      })
      browserHistory.push({pathname:e.key});
    }


     menuItem({key,url,name,children}){
      let {session} = this.state;
      let {userPassport={},employee={}} =  session;
      let authstr = AUTH[employee.roleNumber];
      if(!authstr){
        return 
      }
      if(!authstr.includes(key)){
        return 
      }
      if(children){
          return (
            <SubMenu key={key}   title={<span>{name}</span>}>
              {children.map((item,i)=>{
                if(employee.roleNumber == 5 ){
                  if(item.url=='/operation/kefu/list'){
                    return <Menu.Item key={item.url}>{item.name}</Menu.Item>
                  }
                }else{
                  return <Menu.Item key={item.url}>{item.name}</Menu.Item>
                }

              })}
            </SubMenu>
          )
      }
      
      return (
        <Menu.Item key={url} style={{paddingLeft:'30px'}} className={this.isActive(url)}>
          <span>
              <span>{name}</span>
          </span>
        </Menu.Item>
      )
    }


    async checkLogin(){
      let session = await api('/authority/check/login');
      if(session.cd!=102){
        this.setState({
          session,
          current:location.pathname
        });
      }
    }

    render(){
      var {session,collapsed} = this.state;
      let {userPassport={},employee={}} =  session;
      var {children} = this.props;
      return (
        <div className="layout">
          <Sider
            className="navgation" style={{height:'100vh',overflow:'auto'}}>
            <div className="project-name" >
              <div className='logo-name'>
                医诺筹款
              </div>
            </div>
            <Menu
              theme={'dark'}
              onSelect={this.handleClick.bind(this)}
              defaultOpenKeys={['sub1']}
              selectedKeys={[this.state.current]}
              mode="inline"
            >

              {this.menuItem({
                name:'权限管理',
                key:'authority',
                children:[
                  {name:'员工管理',url:'/authority/staff/list'},
                  {name:'修改密码',url:'/authority/changepassword'},
                ]
              })}
              {this.menuItem({
                name:'用户管理',
                key:'user',
                children:[
                  {name:'用户列表',url:'/user/list'},
                  {name:'提现列表',url:'/user/withdraw/list'}
                ]
              })}

              {this.menuItem({
                name:'筹款项目管理',
                key:'loan',
                children:[
                  {name:'筹款项目审批',url:'/loan/raise/approve'},
                  {name:'在筹款项目管理',url:'/loan/raise/list'}
                ]
              })}

              {this.menuItem({
                name:'运营管理',
                key:'operation',
                children:[
                  {name:'banner管理',url:'/operation/banner/list'},
                  {name:'文章管理',url:'/operation/article/list'},
                  {name:'帮助文档管理',url:'/operation/helper/list'},
                  {name:'短信管理',url:'/operation/sms/list'},
                  {name:'客服管理',url:'/operation/kefu/list'}
                ]
              })}

               {this.menuItem({
                name:'协议管理',
                key:'protocol',
                children:[
                  {name:'投资协议管理',url:'/protocol/invest/list'},
                  {name:'发起协议管理',url:'/protocol/sponsor/list'}
                ]
              })}

              {this.menuItem({
                name:'推广管理',
                key:'generalize',
                children:[
                  {name:'渠道管理',url:'/generalize/channel/list'},
                  {name:'获客管理',url:'/generalize/gainGuest/list'}
                ]
              })}
              {this.menuItem({
                name:'退出',
                key:'logout',
                url:'/logout'
              })}
              
            </Menu>
          </Sider>
          <div className="wrapper-content">
            <div className="header">
              <Menu className="header-menu" mode="horizontal" style={{zIndex:'99'}}>
                <SubMenu  title={<span > <Icon type="user" />{employee.name} </span>}>
                  <Menu.Item key="editpassword" >
                    <a href='javascript:void 0;' onClick={() => {
                      browserHistory.push('/authority/changepassword');
                    }}>修改密码</a>
                  </Menu.Item>
                  <Menu.Item key="logout" >
                    <a href="/logout">注销</a>
                  </Menu.Item>
                </SubMenu>
              </Menu>
            </div>
            {children}
            <div className='footer'>
              由 云简(北京)网络科技有限公司 提供技术支持
            </div>
          </div> 
      </div>
      )
      


    }
}
